<template>
  <div>
    <!-- <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>怪岛管理</el-breadcrumb-item>
      <el-breadcrumb-item>博文列表</el-breadcrumb-item>
    </el-breadcrumb> -->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="goAddpage">新增博客</el-button>
        </el-col>
      </el-row>
      <el-table :data="bloglist" border>
        <el-table-column type="index" width="50" label="#">
        </el-table-column>
        <el-table-column label="日期" width="200" prop="create_time"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="别名" width="100" prop="summary"></el-table-column>
        <el-table-column label="编号" width="100" prop="number"></el-table-column>
        <el-table-column label="状态" width="150">
          <template v-slot:default="scope">
            <!-- <el-select v-model="scope.row.status" @change="statusChange(scope.row.id)">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-tooltip class="item" effect="dark" content="修改状态" placement="top">
              <el-switch v-model="scope.row.status" active-text="发布" inactive-text="草稿" active-color="#13ce66" inactive-color="#ccc" active-value="发布" inactive-value="删除"
                @change="statusChange(scope.row)"></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button @click="lookCommentTap(scope.row.id)">查看评论</el-button>
            <el-button type="primary" @click="goEditPage(scope.row.id)">修改</el-button>
            <el-button type="danger" @click="deleteTap(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="当前评论" :visible.sync="isCommentShow" width="60%">
        <el-table :data="comments.list">
          <el-table-column type="index" width="50" label="#"></el-table-column>
          <el-table-column label="时间" prop="create_time" width="180"></el-table-column>
          <el-table-column label="头像" width="100">
            <template v-slot:default="scope">
              <el-image :src="scope.row.avatar" style="width:60px;height:60px;border-radius: 50%;"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="user" width="100"></el-table-column>
          <el-table-column label="内容" prop="content"></el-table-column>
          <el-table-column label="操作" prop="content" width="100">
            <template v-slot:default="scope">
              <el-button type="danger" @click="deleteCommentTap(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total='comments.total' :page-size="commentInfo.perpage" @current-change="commentCurrentChange" :current-page="commentInfo.commentPageNum">
        </el-pagination>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { getBlogListApi, deleteBlogApi, editBlogStatus, getCommentApi, deltetCommentApi } from '../../request/apis'
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1
      },
      bloglist: [],
      options: [
        {
          value: '草稿',
          label: '草稿'
        },
        {
          value: '发布',
          label: '发布'
        }
      ],
      comments: {},
      isCommentShow: false,
      commentInfo: {
        commentPageNum: 1,
        perpage: 6,
        commentId: 0
      }
    }
  },
  created () {
    this.getBlogList()
  },
  activated () {
    this.getBlogList()
  },
  methods: {
    getBlogList () {
      getBlogListApi(this.queryInfo).then(res => {
        if (res.meta.status !== 200) {
          return this.$message.error('获取博文列表失败')
        }
        this.bloglist = res.data.blogs
        this.total = res.data.total
      })
    },
    goAddpage () {
      this.$router.push('/blog/add')
    },
    handleCurrentChange (newpage) {
      this.queryInfo.pagenum = newpage
      this.getBlogList()
    },
    async statusChange (blog) {
      const confirmResult = await this.$confirm('修改博文状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => {
        blog.status === '草稿' ? blog.status = '发布' : blog.status = '草稿'
        return err
      })
      if (confirmResult !== 'confirm') {
        return this.$message.info('取消')
      }
      const data = await editBlogStatus(blog.id)
      if (data.meta.status !== 200) {
        blog.status === '草稿' ? blog.status = '发布' : blog.status = '草稿'
        return this.$message.error('修改用户权限失败')
      }
      this.$message.success('修改成功！')
    },
    // 删除博文
    async deleteTap (id) {
      const data = await deleteBlogApi(id)
      if (data.meta.status === 200) {
        this.$message.success('删除成功')
        this.getBlogList()
      } else {
        this.$message.error('删除失败')
      }
    },
    goEditPage (id) {
      this.$router.push({ name: 'add', params: { id } })
    },
    // 查看评论
    lookCommentTap (id) {
      this.commentInfo.commentId = id
      this.getComment(id)
    },
    async getComment (id) {
      const pagenum = this.commentInfo.commentPageNum
      const perpage = this.commentInfo.perpage
      const { data, meta } = await getCommentApi({ params: { id, pagenum, perpage } })
      if (meta.status === 200) {
        this.comments = data
        this.isCommentShow = true
      }
    },
    // 评论分页
    commentCurrentChange (newpage) {
      this.commentInfo.commentPageNum = newpage
      this.getComment(this.commentInfo.commentId)
    },
    // 删除评论
    async deleteCommentTap (id) {
      const blogId = this.commentInfo.commentId
      const commentPageNum = this.commentInfo.commentPageNum
      const { data, meta } = await deltetCommentApi({ params: { id, blogId } })
      if (meta.status === 200) {
        this.$message.success('删除成功')
        if ((data.total % this.commentInfo.perpage) === 0) {
          commentPageNum > 1 ? this.commentInfo.commentPageNum -= 1 : this.commentInfo.commentPageNum = 1
        }
        this.getComment(this.commentInfo.commentId)
      }
    }
  }
}
</script>

<style>
</style>
